import React, {Component} from "react";
import {inject, observer} from "mobx-react";
import {withRouter} from "react-router-dom";
import {List, SwipeAction, Tools, Icon, ActivityIndicator} from "weaver-mobile";
import {ListPage} from "weaver-mobile-page";
import ReplyEditor from "../reply/replyEditor";
import * as Tm from "../template";

const getLabel = Tools.getLabel;
@inject("homeStore")
@withRouter
@observer
export default class Home extends Component {
    componentDidMount() {
        const {homeStore: {setVisualHeight}} = this.props;
        const h = document.getThemeVars ?
            document.documentElement.clientHeight - document.getThemeVars()["tab-bar-height"] :
            document.documentElement.clientHeight - 50;
        setVisualHeight(h);
        this.Init(this.props)
    }

    componentWillReceiveProps(nextProps, nextContext) {
        this.Init(nextProps)
    }

    Init = (props) => {
        this.props.homeStore.init(props);
    }

    render() {
        const {
            homeStore: {
                isLoading, visualHeight, ApprovalTaskList, countInfo, comment
            }
        } = this.props;
        return (<div style={{minHeight: visualHeight}} className='proj-container'>
            <div className="h-content-wrapper">
                <div className="task-count-wrapper">
                    <div className="task-count-box">
                        {[
                            [countInfo["todonum"], getLabel("500801", "近期任务"), "/index/task?taskState=0&progress=4", "icon-renwuxiangqing-copy"],
                            [countInfo["overnum"], getLabel("500802", "延期任务"), "/index/task?taskState=0&progress=3", "icon-renwuyanchizhong-copy"],
                            [countInfo["notodonum"], getLabel("15287", "未开始任务"), "/index/task?taskState=0&progress=1", "icon-renwuweikaishi-copy"]
                        ].map((el, index) => {
                            return <div className="task-count-item" key={"home-" + index}>
                                <div className="task-count-item-center" onClick={() => {
                                    this.props.history.push(el[2])
                                }}>
                                    <div className="task-count-num-box">
                                        <i className={`task-count-icon icon-proj ${el[3]}`}/>
                                        <span className="task-count-num">{el[0]}</span>
                                    </div>
                                    <div className="task-count-title">{el[1]}</div>
                                </div>
                            </div>
                        })}
                    </div>
                </div>
                <div className="proj-list-box">
                    <div className="proj-list-top-bar">
                        <div className='h-list-top-title'>{getLabel("500803", "任务审批")}</div>
                        <div className="title-right-more" onClick={() => {
                            this.props.history.push("/index/task?taskState=1&progress=0")
                        }}>{getLabel("17499", "更多")}
                            <Icon type="right"/></div>
                    </div>
                    <List>
                        {this.renderContent(ApprovalTaskList)}
                        {ApprovalTaskList.data.length === 0 ?
                            <div className="am-list-footer" style={{background: "#fff"}}>
                                <div className="wm-list-view-page-modal-nomore" style={{paddingTop: "6.5px"}}>
                                    <span className="wm-list-view-page-modal-nomore-line-left"/>
                                    <span className="wm-list-view-page-modal-nomore-line-name">
                                        {getLabel("500804", "没有更多...")}</span>
                                    <span className="wm-list-view-page-modal-nomore-line-right"/>
                                </div>
                            </div> : null}
                    </List>

                </div>
                <div className="proj-list-box" style={{height: "100%"}}>
                    <div className="proj-list-top-bar">
                        <div className='h-list-top-title'>{getLabel("15153", "相关交流")}</div>
                    </div>
                    {isLoading ?
                        (<div className='loading'><ActivityIndicator animating size='large'/></div>) :
                        <div style={{height: "100%",marginBottom:(window.getThemeVars ? window.getThemeVars()["tab-bar-height"] : 50)}}>
                            <ReplyEditor replyStore={comment} />
                        </div>
                    }
                </div>
            </div>
        </div>);
    }

    renderContent = () => {
        const fields = [];
        const {ApprovalTaskList, approve, refuse} = this.props.homeStore;
        ApprovalTaskList.data.forEach((item, index) => {
            fields.push(
                <SwipeAction
                    key={index}
                    style={{backgroundColor: "gray"}}
                    autoClose
                    right={[{
                        text: getLabel("142", "批准"),
                        style: {backgroundColor: "#4dacfa", color: "#fff", padding: "0 8px"},
                        onPress: () => {
                            approve(item.tskid)
                        },
                    },
                        {
                            text: getLabel("236", "退回"),
                            style: {backgroundColor: "#f4333c", color: "#fff", padding: "0 8px"},
                            onPress: () => {
                                refuse(item.tskid)
                            },
                        }]}
                >
                    <ListPage.Item
                        data={item}
                        getTemplate={Tm.getHomeTaskTemplate}
                        onClick={() => {
                        }}
                        withSwipeAction
                        swipeActionProps={{}}
                    />
                </SwipeAction>)
        })
        return fields;
    }

}
